<!--  -->
<template>
  <div>
    <el-menu
      :default-active="currenttab"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">按流程</el-menu-item>
      <el-menu-item index="2">按时间</el-menu-item>
    </el-menu>

    <div class="myreservecontent">
      <div class="forpath" v-if="currenttab=='1'">
        <div class="pathcontent">
          <div class="pathcontentitem" v-for="(item,index) in pathlist" :key="index">
            <div class="title" :style="{'background':item.color}">
              <i class="icon icon-check-circle" v-if="item.title=='已完成'"></i>
              <i class="icon icon-clipboard" v-if="item.title=='审批中'"></i>
              <i class="icon icon-users" v-if="item.title=='进行中'"></i>
              <i class="icon icon-feather" v-if="item.title=='已审批'"></i>
              {{item.title}}
            </div>
            <div class="pathlist">
              <div class="pathlistitem" v-for="(listitem,listindex) in item.list" :key="listindex">
                <div class="listcontent">
                  <span>会议名称:</span>
                  <span>{{listitem.name}}</span>
                </div>
                <div class="listcontent">
                  <span>开始时间:</span>
                  <span>{{listitem.startTime | dateFormat}}</span>
                </div>
                <div class="listcontent">
                  <span>结束时间:</span>
                  <span>{{listitem.endTime | dateFormat}}</span>
                </div>
                <div class="listcontent" v-if="listitem.room">
                  <span>会议地点:</span>
                  <span>{{listitem.room.name}}</span>
                </div>
                <div class="editbutton">
                  <at-button v-if="item.title=='审批中'" @click="showdialog(listitem)">
                    <i class="icon icon-trash-2"></i>取消预订
                  </at-button>
                  <at-button v-if="item.title=='进行中'" @click="prolong(listitem)">
                    <i class="icon icon-zap"></i>续订
                  </at-button>
                  <at-button v-if="item.title=='已完成'" @click="showdialog(listitem,'delete')">
                    <i class="icon icon-trash-2"></i>删除
                  </at-button>
                  <at-button type="info" hollow>
                    <router-link :to="{ path: '/detail/'+listitem.ID,query:{infor:listitem}}">查看详情</router-link>
                  </at-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="fortime" v-if="currenttab=='2'">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in timemeetinglist"
            :key="index"
            :color="activity.color"
            :timestamp="activity.start"
            placement="top"
          >
            <el-card>
              <span :style="{'color':activity.color}">{{activity.statustitle}}</span>

              <div class="cardcontent">
                <div class="conferencecontent">
                  <div class="describe">
                    <span>会议内容:</span>
                    <span>{{activity.name}}</span>
                  </div>
                  <div class="describe" v-if="activity.room">
                    <span>会议地点:</span>
                    <span>{{activity.room.addr}}</span>
                  </div>
                  <div class="describe">
                    <span>会议时间:</span>
                    <span>{{activity.startTime | dateFormat}}</span>
                  </div>
                </div>
                <div class="editconferencebutton">
                  <at-button
                    v-if="activity.status=='0'||activity.status=='2'"
                    @click="showdialog(activity)"
                  >
                    <i class="icon icon-trash-2"></i>取消预订
                  </at-button>
                  <at-button v-if="activity.status=='3'" @click="showdialog(activity,'delete')">
                    <i class="icon icon-trash-2"></i>删除
                  </at-button>
                  <at-button v-if="activity.status=='1'" @click="prolong(activity)">
                    <i class="icon icon-zap"></i>续订
                  </at-button>
                  <router-link :to="{ path: '/detail/'+activity.ID,query:{infor:activity}}">
                    <at-button type="primary">查看详情</at-button>
                  </router-link>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>

    <at-modal v-model="dialogVisible">
      <div slot="header" style="text-align:center;">
        <span>确认信息</span>
      </div>
      <div style="text-align:center;">
        <span>确认要取消预定吗?</span>
      </div>
      <div slot="footer">
        <at-button @click="dialogVisible=false">取消</at-button>
        <at-button type="primary" @click="deletereservation(listitem)">确定</at-button>
      </div>
    </at-modal>
    <at-modal v-model="prolongmodal">
      <div slot="header" style="text-align:center;">
        <span>会议室续订</span>
      </div>
      <div style="text-align:center;">
        <slider
          :min="0"
          :max="2000"
          :start="prolongstarttime"
          @handleprolong="handleprolong"
          v-model="prolongtime"
        ></slider>
      </div>
      <div slot="footer">
        <at-button @click="prolongmodal=false">取消</at-button>
        <at-button type="primary" @click="submitprolong">续订</at-button>
      </div>
    </at-modal>
  </div>
</template>

<script>
import { GMTToStr } from "../../assets/js/common.js";
import slider from "./slider.vue";
import { mapState, mapMutations } from "vuex";
import { setCookie, getCookie, removeCookie } from "../../assets/js/common";
import { fetch, post } from "../../config/request";
import Axios from "axios";
export default {
  data() {
    return {
      currenttab: "1",
      //0审批中 1进行中 2 已审批 3 已完成
      datalist: [],
      pathlist: [
        {
          title: "审批中",
          color: "#fb7d42",
          list: []
        },
        {
          title: "进行中",
          color: "#3e76de",
          list: []
        },
        {
          title: "已审批",
          color: "#f4ce47",
          list: []
        },
        {
          title: "已完成",
          color: "#02b861",
          list: []
        }
      ],
      prolongtime: "",
      prolongmodal: false,
      prolongstarttime: "",
      meetinglist: [],
      size: 10,
      nowtime: "",
      currentdata: "",
      dialogVisible: false,
      listitem: "",
      timemeetinglist: [],
      ifdelete: ""
    };
  },
  created() {
    this.datalist = this.$store.state.datalist;
    this.nowtime = new Date().getTime();
    // this.getpathlist(this.datalist);
    let meetingstate = this.$store.state.meetings;
    console.log(meetingstate);
    if (meetingstate.length == 0) {
      this.getlist();
    } else {
      this.meetinglist = JSON.parse(JSON.stringify(this.meetings));
      console.log(this.meetinglist);
      this.setmeetingstatus();
      this.getpathlist(this.meetinglist);
    }
  },
  components: { slider },

  computed: { ...mapState(["meetings"]) },

  methods: {
    submitprolong() {
      console.log(this.currentdata);
      let time =
        GMTToStr(this.currentdata.endTime).split(" ")[0] +
        " " +
        this.prolongtime;
      console.log(new Date(time));
      this.$set(this.currentdata, "endTime", new Date(time).getTime());
      // this.updateMeetings({
      //   ID: this.currentdata.ID,
      //   endTime: new Date(time).getTime()
      // });
      this.changeMeetings({
        meetings: this.meetinglist
      });
      this.prolongmodal = false;
      this.$message({
        type: "success",
        message: "续订成功"
      });
    },
    handleprolong(time) {
      this.prolongtime = time;
    },
    showdialog(data, ifdelete) {
      this.ifdelete = ifdelete;
      this.dialogVisible = true;
      this.listitem = data;
    },
    deletereservation(data) {
      // Axios.delete("/api/api/user/meeting?ID=" + data.id).then(res => {
      //   console.log(res);
      // });
      console.log(data);
      let that = this;
      if (this.ifdelete == "delete") {
        this.meetinglist = this.meetinglist.filter(item => {
          return item.ID != data.ID;
        });
      } else {
        this.$set(data, "status", 3);
      }
      this.changeMeetings({
        meetings: this.meetinglist
      });
      this.getpathlist(this.meetinglist);
      this.dialogVisible = false;
      Axios.delete("/api/api/user/meeting/" + data.ID, {
        headers: {
          Authorization: getCookie("token")
        }
      }).then(res => {
        that.$message({
          type: "success",
          message: "删除成功"
        });
      });
    },
    async getlist() {
      let meetinglist = [];
      let total = await this.calculatepage();
      let count = Math.ceil(total / this.size);
      for (let i = 0; i < count; i++) {
        let pushdata = await this.getmeetings(i + 1);
        meetinglist = meetinglist.concat(pushdata);
      }
      this.changeMeetings({
        meetings: meetinglist
      });
      this.meetinglist = meetinglist;
      this.setmeetingstatus();

      this.getpathlist(this.meetinglist);
    },
    setmeetingstatus() {
      this.meetinglist.map(item => {
        if (item.startTime > this.nowtime) {
          //  item.status = Math.random() > 0.5 ? 0 : 2;
          item.status = 0;
        } else if (
          item.startTime < this.nowtime &&
          item.endTime > this.nowtime
        ) {
          item.status = 1;
        } else if (item.endTime < this.nowtime) {
          item.status = 3;
        }
      });
    },
    calculatepage() {
      return new Promise((resolve, reject) => {
        fetch("/api/api/user/meeting?size=" + this.size).then(res => {
          resolve(res.data.meetings.total);
        });
      });
    },
    getmeetings(page) {
      return new Promise((resolve, reject) => {
        fetch("/api/api/user/meeting?size=" + this.size + "&page=" + page).then(
          res => {
            let list = res.data.meetings.list;
            let total = res.data.meetings.total;
            resolve(res.data.meetings.list);
          }
        );
      });
    },
    prolong(data) {
      this.currentdata = data;
      this.prolongstarttime = GMTToStr(data.endTime)
        .split(" ")[1]
        .substring(0, 5);
      this.prolongmodal = true;
    },
    getpathlist(list) {
      this.pathlist.map(item => {
        item.list = [];
      });
      list.map((item, index) => {
        switch (item.status) {
          case 0:
            this.pathlist[0].list.push(item);
            item.color = "#fb7d42";
            item.statustitle = "审批中";
            break;
          case 1:
            this.pathlist[1].list.push(item);
            item.color = "#3e76de";
            item.statustitle = "进行中";
            break;
          case 2:
            this.pathlist[2].list.push(item);
            item.color = "#f4ce47";
            item.statustitle = "已审批";
            break;
          case 3:
            this.pathlist[3].list.push(item);
            item.color = "#02b861";
            item.statustitle = "已完成";
            break;
        }
      });
    },
    handleSelect(key, keyPath) {
      this.currenttab = key;
      this.timemeetinglist = this.meetinglist.sort(function(a, b) {
        return b.startTime - a.startTime;
      });
    },
    ...mapMutations(["changeMeetings", "deleteMeetings", "updateMeetings"])
  }
};
</script>
<style scoped lang="scss">
@import "../../assets/css/elcss.css";
.myreservecontent {
  max-height: 600px;
  overflow-y: scroll;
  .forpath {
    .pathcontent {
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
      .pathcontentitem {
        width: 23%;
        .title {
          height: 40px;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;

          width: 100%;
          text-align: left;
          line-height: 40px;
          color: white;
          padding-left: 10px;
        }
        .pathlist {
          padding: 10px;
          background: #f9faff;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          font-size: 12px;
          .pathlistitem {
            background: white;
            margin: 10px 0;
            padding: 10px;
            .listcontent {
              display: flex;
              width: 100%;
              justify-content: space-between;
              margin: 5px 0;
            }
            .editbutton {
              width: 100%;
              text-align: right;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
  .fortime {
    padding: 20px;
    width: 500px;
    div {
      text-align: left;
    }
    .cardcontent {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      .describe {
        margin: 5px 0;
      }
      .editconferencebutton {
      }
    }
  }
}
</style>